UI

Step1: main page

create empty layout with Scaffold

                          import 'package:flutter/material.dart';


                          void main() {
                            runApp(const MyApp());
                          }

                          class MyApp extends StatelessWidget {
                            const MyApp({super.key});

                            @override
                            Widget build(BuildContext context) {
                              return MaterialApp(
                                debugShowCheckedModeBanner: false,
                                home: LandingPage(),
                              );
                            }
                          }


                          class LandingPage extends StatelessWidget{
                            
                            Widget build(BuildContext context) {
                              
                              return Scaffold(
                          

                              );

                            }
                          }

                          

Step2: Add text to the layout

1. There are 2 lines of text. So use Column layout

2. add the text() elements

                          body: Column(


                              children: [

                                  Text(
                                    'warren',
                                    style: TextStyle(
                                      fontSize: 50,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),

                                  Text(
                                    'Warren conducts your financial life\nso you can make good money\ndecisions with confidence.',
                                    style: TextStyle(
                                      fontSize: 17,
                                    ),
                                  ),


                              ],


                          )

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LandingPage(),
    );
  }
}


class LandingPage extends StatelessWidget{
  Widget build(BuildContext context) {
    return Scaffold(

        body: Column(


            children: [
                Text(
                  'warren',
                  style: TextStyle(
                    fontSize: 50,
                    fontWeight: FontWeight.bold,
                  ),
                ),

                Text(
                  'Warren conducts your financial life\nso you can make good money\ndecisions with confidence.',
                  style: TextStyle(
                    fontSize: 17,
                  ),
                ),

            ],


      )

    );

  }
}

Step3: Align the text to bottom

add mainAxisAlignment: MainAxisAlignment.end,

                          body: Column(

                              mainAxisAlignment: MainAxisAlignment.end,

                              children: [
                                  Text(
                                    'warren',
                                    style: TextStyle(
                                      fontSize: 50,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),

                                  Text(
                                    'Warren conducts your financial life\nso you can make good money\ndecisions with confidence.',
                                    style: TextStyle(
                                      fontSize: 17,
                                    ),
                                  ),

                              ],


                              )

                              

Step4: Apply bottom margin to the text

1. add the container layout to the body

2. use the above column code to the "child" propery of container

3. apply margin propery to the container

                          return Scaffold(

                                body: Container(
                                    margin: EdgeInsets.only(bottom: 30.0),
                                    child:Column(

                                        mainAxisAlignment: MainAxisAlignment.end,

                                        children: [
                                            Text(
                                              'warren',
                                              style: TextStyle(
                                                fontSize: 50,
                                                fontWeight: FontWeight.bold,
                                              ),
                                            ),

                                            Text(
                                              'Warren conducts your financial life\nso you can make good money\ndecisions with confidence.',
                                              style: TextStyle(
                                                fontSize: 17,
                                              ),
                                            ),

                                        ],


                                  ) //column
                                ) //container

                                );

Step5: Apply text align to center

1. add alignment: Alignment.bottomCenter, to the container

                          return Scaffold(

                          body: Container(
                              margin: EdgeInsets.only(bottom: 30.0),
                              alignment: Alignment.bottomCenter,
                              child:Column(

                                  mainAxisAlignment: MainAxisAlignment.end,

                                  children: [
                                      Text(
                                        'warren',
                                        style: TextStyle(
                                          fontSize: 50,
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),

                                      Text(
                                        'Warren conducts your financial life\nso you can make good money\ndecisions with confidence.',
                                        style: TextStyle(
                                          fontSize: 17,
                                        ),
                                      ),

                                  ],


                            ) //column
                          ) //container

                          );

Step 6: Final Layout

1. add Stack layout

2. add Positioned to the stack layout

3. open pubspec.yaml and add flutter_svg_provider: ^1.0.7 under dependencies:

4. import flutter_svg_provider in the main file

5. save svg image in assets/svgs/

6. enable assets and svg file in pubspec.yaml

                          import 'package:flutter/material.dart';
import 'dart:math';
import 'package:flutter_svg_provider/flutter_svg_provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LandingPage(),
    );
  }
}


class LandingPage extends StatelessWidget{
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Stack(
          children: [
            // right top black
            Positioned(
              top: 20,
              right: -70,
              height: 250,
              child: Transform.rotate(
                angle: 4.5,
                child: Image(
                  image: Svg('assets/svgs/svg-path.svg'),
                  color: StoreColors.darkTeal,
                ),
              ),
            ),
            // left side orangeish
            Positioned(
              top: 5,
              left: -205,
              height: 450,
              child: Transform.rotate(
                angle: pi,
                child: Image(
                  image: Svg('assets/svgs/svg-path.svg'),
                  color: StoreColors.darkBrown,
                ),
              ),
            ),
            // Right side dark green
            Positioned(
              bottom: 180,
              right: -220,
              height: 450,
              child: Transform.rotate(
                angle: 2 * pi,
                child: Image(
                  image: Svg('assets/svgs/svg-path.svg'),
                  color: StoreColors.darkGreen,
                ),
              ),
            ),
            Positioned(
              child: Align(
                alignment: Alignment.center,
                child: Transform.rotate(
                  angle: 2 * pi,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 200, right: 120),
                    child: Image(
                      height: 100,
                      width: 90,
                      image: Svg('assets/svgs/svg-path.svg'),
                      color: StoreColors.darkTeal,
                    ),
                  ),
                ),
              ),
            ),
            // Right bottom corner side dark orange
            Positioned(
              bottom: -340,
              right: -240,
              height: 450,
              child: Transform.flip(
                flipX: true,
                flipY: true,
                child: Image(
                  image: Svg('assets/svgs/svg-path.svg'),
                  color: StoreColors.darkBrown,
                ),
              ),
            ),

            // left bottom corner side
            // some unknown color name haha
            Positioned(
              bottom: -130,
              left: -250,
              height: 450,
              child: Transform.rotate(
                angle: pi * 0.5,
                child: Image(
                  image: Svg('assets/svgs/svg-path.svg'),
                  color: StoreColors.ligthPink,
                ),
              ),
            ),

            Positioned.fill(
              bottom: 100,
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'warren',
                      style: TextStyle(
                        fontSize: 50,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 15),
                    Text(
                      'Warren conducts your financial life\nso you can make good money\ndecisions with confidence.',
                      style: TextStyle(
                        fontSize: 17,
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ));

  }
}

class StoreColors {
  static final darkTeal = Color.fromRGBO(14, 14, 14, 1);
  static final darkBrown = Color.fromRGBO(178, 123, 78, 1);
  static final darkGreen = Color.fromRGBO(29, 88, 73, 1);
  static final ligthPink = Color.fromRGBO(217, 184, 180, 1);
  static final red = Color.fromRGBO(204, 53, 51, 1);
  static final lightGrey = Color.fromRGBO(246, 245, 244, 1);
}